<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>book</title>
	<style>
        body,html{
            text-align: center;
        }
		button{
			cursor: pointer;
            padding: 0;
		}
        #tab{
            margin-top: 10px;
            margin-left: 5px;
            display: none;
        }
        #tab div{
            width: 600px;
            border-bottom: 1px solid black;
            overflow: hidden;
        }
        #tab div p{
            margin: 0;
            padding-top: 5px;
            padding-bottom: 5px;
            text-align: center;
            box-sizing: border-box;
            float:left;
            width: 25%;
            border-left: 1px solid black;
        }
        #tab div p button{
            padding: 0;
        }
		#tab div:nth-of-type(1){
            border-top: 1px solid black;
		}
        #tab div p:nth-of-type(4){
            border-right: 1px solid black;
        }
        #tan{
            position: absolute;
            background-color: white;
            top: 10px;
            left: 10px;
            display: none;
        }
        #tan div:nth-of-type(1){
            border-top: 1px solid black;
        }
        #tan div{
            width: 600px;
            border-bottom: 1px solid black;
            overflow: hidden;
        }
        #tan div p{
            margin: 0;
            padding-top: 5px;
            padding-bottom: 5px;
            text-align: center;
            box-sizing: border-box;
            float:left;
            width: 25%;
            border-left: 1px solid black;
        }
        #tan div p:nth-of-type(4){
            border-right: 1px solid black;
        }
        #tan div input{
            width: 25%;
            height: 32px;
            float: left;
            box-sizing: border-box;
            border: .5px solid black;
            padding: 0;
            text-align: center;
            outline: none;
            color: gray;
        }
        #ok{
            border-right: 1px solid black;
            cursor: pointer;
        }
        #add{
            display: none;
            position: absolute;
        }
        #search{
            display: inline-block;
        }
	</style>
</head>
<body>
	<div id="search">
	    书名: <input type="text" name="name" id="chaname">
		作者: <input type="text" name="author" id="chaauthor">
		价格: <input type="text" name="price" id="chaprice">
		<button onclick="searchok()">查找</button>
	</div>
	<button onclick="lookAll()">查看所有</button>
	<button onclick="showAdd()">添加</button>
	<div></div>
	<div id="add">
		书名: <input type="text" name="name" id="name">
		作者: <input type="text" name="author" id="author">
		价格: <input type="text" name="price" id="price">
		<button onclick="add()">添加</button>
		<button onclick="hiddenAdd()">取消</button>
	</div>
	<div id="tab">
		<div><p>书名</p><p>作者</p><p>价格</p><p>操作</p></div>
	</div>
	<div id="tan">
	    <div>
			<p>书名</p>
			<p>作者</p>
			<p>价格</p>
			<p>操作</p>
		</div>
		<div>
		    <input type="text" placeholder="修改书名">
		    <input type="text" placeholder="修改作者">
		    <input type="text" placeholder="修改价格">
		    <p id="ok"><button onclick="ok()">修改</button></p>
		</div>
	</div>
</body>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script>
    var kan = false;
    var searchinputs = document.querySelectorAll("#search input");
    var bookArr = [];
    
    
    /*查找*/
    function searchok() {
        var name = searchinputs[0].value;
        var author = searchinputs[1].value;
        var price = searchinputs[2].value;
        $("#tab").css("display","inline-block");
        if(name == ""){
            name = "*";
        }
        if(author == ""){
            author = "*";
        }
        if(price == ""){
            price = "*";
        }
        $.ajax({
            url:"http://127.0.0.1/books/book.php",
            type:"post",
            data:{"type":"search","name":name,"author":author,"price":price},
            success:function (response){
                kan = true;
                look(response);
            }
        });
    }
    
    
    /*添加*/
    function showAdd(){
        $("#add").css({
            display:"inline-block",
            top:window.innerHeight/2 + "px",
            left:window.innerWidth/2 + "px",
            marginLeft: -$("#tan").width()/2 + "px",
            marginTop: -$("#tan").height()/2 + "px",
            border:"1px solid black",
            padding:"5px"
        });
    }
    function hiddenAdd() {
        $("#add").css("display","none");
    }
    
    /*添加*/
	function add() {
        $("#add").css("display","none");
        var name = document.getElementById("name").value;
        var author = document.getElementById("author").value;
        var price = document.getElementById("price").value;
        if(name == "" || author == "" || price == ""){
            alert("请输入完整");
            return;
        }
        $.ajax({
            url:"http://127.0.0.1/books/book.php",
            type:"post",
            data:{"type":"add","name":name,"author":author,"price":price},
            success:function (response){
                if(kan){
                    look(response);
                }
            }
        });
    }
    
    
    /*查看*/
    function lookAll(){
        kan = true;
        searchinputs[0].value = "";
        searchinputs[1].value = "";
        searchinputs[2].value = "";
        $("#tab").css("display","inline-block");
        $.ajax({
            url:"http://127.0.0.1/books/book.php",
            type:"post",
            data:{"type":"look"},
            success:function (response){
                kan = true;
                look(response);
            }
        }); 
    }
    
    
    
    /*显示传回的数据*/
    function look(obj){
        bookArr = [];
        bookArr = JSON.parse(obj);
        var tab = document.getElementById("tab");
        tab.innerHTML = '<div><p>书名</p><p>作者</p><p>价格</p><p>操作</p></div>';
        for(var i = 0; i < bookArr.length; i++){
            var div = document.createElement("div");
            div.innerHTML = "<p>"+bookArr[i].name+"</p><p>"+bookArr[i].author+"</p><p>￥"+bookArr[i].price+"</p><p><button onclick='mod("+i+")'>修改</button><button onclick='dete("+i+")'>删除</button></p>";
            tab.appendChild(div);
        }
    }
    
    /*用来存放要修改成的数据*/
    var name = "";
    var author = "";
    var price = "";
    /*用来存放要修改的数据*/
    var index = {};
    var ipts = document.querySelectorAll("#tan input");
    /*修改数据*/
    function mod(i){
        $("#tan").css({
            display:"block",
            top:window.innerHeight/2 + "px",
            left:window.innerWidth/2 + "px",
            marginLeft: -$("#tan").width()/2 + "px",
            marginTop: -$("#tan").height()/2 + "px"
        });
        index = bookArr[i];
        name = bookArr[i].name;
        author = bookArr[i].author;
        price = bookArr[i].price;
        ipts[0].value = name;
        ipts[1].value = author;
        ipts[2].value = price;
    }
    /*确认修改*/
    function ok(){
        $("#tan").css("display","none");
        $.ajax({
            url:"http://127.0.0.1/books/book.php",
            type:"post",
            data:{"type":"mod","name":index.name,"author":index.author,"price":index.price,"newName":ipts[0].value,"newAuthor":ipts[1].value,"newPrice":ipts[2].value},
            success:function(response) {
                look(response);
            }
        });
    }
    
    /*删除*/
    function dete(i){
        var name = bookArr[i].name;
        var author = bookArr[i].author;
        var price = bookArr[i].price;
        $.ajax({
            url:"http://127.0.0.1/books/book.php",
            type:"post",
            data:{"type":"dete","name":name,"author":author,"price":price},
            success:function (response){
                if(kan){
                    look(response);
                }
            }
        });
    }
    
    
</script>
</html>